<style>
	.commonBg {
		background: #fff;
		border: 1px solid#ddd;
		border-radius: 8px;
		width: 30px;
		height: 30px;
		font-size: 12px;
		text-align: center;
		line-height: 30px;
		position: relative;
	}

	.dot1 {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #4475f3;
	}

	.dot2 {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #fb8981;
	}

	.selected {
		font-weight: bold !important;
		color: #3A3EF4 !important;
	}
</style>
<template>
	<div style="height: 100%;">
		<div class="mb10" style="height: 538px;display: flex;justify-content: space-between;">
			<div style="border-radius: 8px;padding:0px 23px;flex:5" class="bgfff bra8">
				<div class="displayFlexBet pb14" style="border-bottom: 1px solid#F4F4F4;">
					<div style="color: #888;" class="displayFlex font14">
						<div style="padding-top: 27px;" :class="[optionType == 'one'?'headerStyle':'']" class="point"
							@click="optionType = 'one'">在线监测</div>
						<div style="margin-left: 33px;padding-top: 27px;" :class="[optionType == 'two'?'headerStyle':'']"
							class="point" @click="optionType = 'two'">自行监测</div>
					</div>
					<div>
						<span v-if="dataList.onlineStatus == 'ONLINE'" style="color:#00B43A;">在线</span>
						<span v-else-if="dataList.onlineStatus == 'OFFLINE'" style="color:#888;">离线</span>
						<span style="margin-left: 5px;color: #555;">{{dataList.latestTime || '数据没有接入'}}</span>
					</div>
				</div>

				<div>
					<div style="display: flex;justify-content: space-between;" v-show="optionType=='one'">
						<div style="overflow-y: auto; height: 200px;flex: 1;">
							<el-empty v-if="!dataList.pollutionList || dataList.pollutionList.length === 0" />
							<div v-for="(item1,index1) in dataList.pollutionList" :key="index1"
								class="pb14 displayFlexBet pt14" style="border-bottom: 1px solid#F4F4F4;">
								<div class="displayFlex">
									<div class=" color555">{{item1.pollutionName || ''}}</div>
									<div class="ml10 color555">
										{{item1.actualAmount == null?'--':item1.actualAmount}}
									</div>
								</div>
								<div style="color: #9F9F9F;">{{item1.unitValue || ''}}</div>
							</div>
						</div>

						<div style="flex: 1;background: #E3F5FF;border-radius: 4px;" class="ml20">
							<div class="displayFlex" style="padding: 33px 5px 30px 25px;">
								<div class="color888 mr40" style="width: 85px;">小时达标率</div>
								<div class="displayFlexBet">
									<div class="displayFlex mr20" style="color: #0B55A1;">
										<div class="mr5">本月</div>
										<el-progress type="circle" :percentage="data4.hourMonthPercent" color="#0B55A1"
											:width="60" :stroke-width="5"></el-progress>
									</div>

									<div class="displayFlex mr20 ml30" style="color: #0B55A1;">
										<div class="mr5">全年</div>
										<el-progress type="circle" :percentage="data4.hourYearPercent" color="#0B55A1" :width="60"
											:stroke-width="5"></el-progress>
									</div>
								</div>
							</div>
							<div style="height: 1px;background: #FFF;width: 100%;"></div>
							<div class="displayFlex" style="padding: 33px 5px 30px 25px;">
								<div class="color888 mr40" style="width: 85px;">日数据达标率</div>
								<div class="displayFlexBet">
									<div class="displayFlex mr20" style="color: #0B55A1;">
										<div class="mr5">本月</div>
										<el-progress type="circle" :percentage="data4.dayMonthPercent" color="#0B55A1" :width="60"
											:stroke-width="5"></el-progress>
									</div>

									<div class="displayFlex mr20 ml30" style="color: #0B55A1;">
										<div class="mr5">全年</div>
										<el-progress type="circle" :percentage="data4.dayYearPercent" color="#0B55A1" :width="60"
											:stroke-width="5"></el-progress>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div label="自行监测" name="second" v-show="optionType == 'two'"
						style="overflow-y: auto;height: 250px;overflow-x: hidden;">

						<el-empty v-if="data5.length == 0" />
						<div v-for="(item,index) in data5" :key="index" class="mb16 font14 mr16"
							style="width: calc(33.3% - 16px);border-radius: 0px 8px 8px 0px;padding: 10px 20px;display: inline-block;"
							:style="{'background':item.bg,'color':item.color,'borderLeft':'1px solid'+item.borderColor}">
							<div class="displayFlexBet mb10">
								<div>{{item.planTime}}</div>
								<div v-if="item.isComplete">已完成</div>
								<div v-else>未完成</div>
							</div>
							<div class="mb10">{{item.resultStr || '未填写'}}</div>

							<div v-if="item.pollutionList && item.pollutionList.length">
								<div v-for="(item2,index2) in item.pollutionList">
									<span>{{item2.pollutionName}}</span>
									<span>({{item2.pollutionValue || '--'}})</span>
								</div>
							</div>
						</div>
					</div>

					<div style="height: 1px;background: #E5E5E5;width: 100%;" class="mt20 mb20"></div>

					<div style="color:#222;margin-bottom:3px" class="font15 mb15">视频监控</div>
					<div style="height: 400px;overflow-x: auto;width: 100%;" v-if="videoList.length">
						<div v-for="(item,index) in videoList" :key="index" class="point mr20"
							style="width: 180px;position:relative;display: inline-block;height: 104px;"
							@click="showSingleVode(item)">
							<el-image :src="item.coverFile" style="width:100%;height: 104px;border-radius: 4px;" />
							<div class="mt5" style="color: #888;">{{item.equipmentPosition}}</div>
							<img src="@/assets/sIcon168.png"
								style="position:absolute;text-align:center;width: 33px;height: 33px;top: 38px;left: 70px;" />
						</div>
					</div>
					<el-empty v-else :imageSize="50"/>
				</div>

			</div>
			<div style="flex: 2;margin-left: 15px;">
				<div style="border-radius: 4px;height: 460px;color: #fff;position: relative;">
					<div class="displayFlexBet"
						style="background: linear-gradient(0deg, #FFFFFF, #FFEBD8);border-bottom: 1px solid#F4F4F4;padding: 0 23px 14px;">
						<div style="color: #FE9E72;" class="displayFlex font14">
							<div style="padding-top: 27px;" :class="[chooseItem == 'one'?'headerStyle2':'']" class="point"
								@click="chooseItem = 'one'">
								预警（{{dataList2.earlyWarningList.length}}）
							</div>
							<div style="margin-left: 33px;padding-top: 27px;" :class="[chooseItem == 'two'?'headerStyle2':'']"
								class="point" @click="chooseItem = 'two'">
								告警（{{dataList2.warningList.length}}）
							</div>
						</div>
					</div>

					<div v-if="chooseItem == 'one'" class="bgfff" style="padding: 0 23px;">
						<div v-if="dataList2.earlyWarningList && dataList2.earlyWarningList.length > 0"
							style="height: 400px;overflow-y: auto;color: #8D8D8D;">
							<div v-for="(item,index) in dataList2.earlyWarningList" :key="index" class="font13 point pt15 pb15"
								@click="gotoDet2(item)" style="border-bottom:1px solid#F4F4F4;">
								<div style="width: 100%;" class="mb5 font14">
									<span>{{index+1}}.</span>
									<span>{{item.problemContent || ''}}</span>
								</div>
								<div style="line-height: 18px;text-align: right;color: #9F9F9F;" class="font13">
									{{item.createTime || ''}}
								</div>
							</div>
						</div>
						<el-empty v-else :imageSize="50" />
					</div>

					<div v-if="chooseItem == 'two'" class="bgfff" style="padding: 0 23px;">
						<div v-if="dataList2.warningList && dataList2.warningList.length > 0"
							style="height: 400px;overflow-y: auto;color: #8D8D8D;">
							<div v-for="(item,index) in dataList2.warningList" :key="index" class="font13 point pt15 pb15"
								@click="gotoDet2(item)" style="border-bottom:1px solid#F4F4F4;">
								<div style="width: 100%;" class="mb5 font14">
									<span>{{index+1}}.</span>
									<span>{{item.problemContent || ''}}</span>
								</div>
								<div style="line-height: 18px;text-align: right;color: #9F9F9F;" class="font13">
									{{item.createTime || ''}}
								</div>
							</div>
						</div>
						<el-empty v-else :imageSize="50" />
					</div>
				</div>

				<div class="displayFlex bgfff mt15 bra4" v-if="$refs.outletOrderV2" style="padding: 10px 0;">
					<div class=" point " style=" text-align: center;flex: 1;" @click="$refs.outletOrderV2.showXunJianRecord">
						<img src="@/assets/sIcon192.png" style="height: 16px;width: 16px;" />
						<div class="font14 color555">巡检记录</div>
					</div>
					<div class=" point" style=" text-align: center;flex: 1;" @click="$refs.outletOrderV2.gotoDet">
						<img src="@/assets/sIcon193.png" style="height: 16px;width: 16px;" />
						<div class="font14 color555">运行台账</div>
					</div>
					<div class=" point" style=" text-align: center;flex: 1;"
						@click="$refs.outletOrderV2.getNotRecordStdBook">
						<img src="@/assets/sIcon194.png" style="height: 16px;width: 16px;" />
						<div class="font14 color555">未做台账</div>
					</div>
					<div class=" point" style=" text-align: center;flex: 1;" @click="$refs.outletOrderV2.getAbnormalStdBook">
						<img src="@/assets/sIcon195.png" style="height: 16px;width: 16px;" />
						<div class="font14 color555">台账异常</div>
					</div>
					<div class=" point" style=" text-align: center;flex: 1;" @click="$refs.outletOrderV2.makeOrder">
						<img src="@/assets/sIcon196.png" style="height: 16px;width: 16px;" />
						<div class="font14 color555">制作台账</div>
					</div>
				</div>
			</div>
		</div>

		<outletOrderV2 v-if="outletId && outletName" ref="outletOrderV2" :outletId="outletId" :outletName="outletName" />

		<div class="mb10"
			style="height: 468px;display: flex;justify-content: space-between;background: #FFFFFF;border-radius: 8px;padding:18px 22px;">
			<div style="flex:6">
				<div style="color:#222;" class="font15 mb15">设备运行状态</div>

				<div style="height: 401px;overflow-y: auto;">
					<el-empty v-if="data6.length == 0" />

					<div v-for="(item,index) in data6" v-if="item.installationId == null" :key="index"
						@click="$router.push('/wasteGas/outletInspectDefDet?defenceId='+item.installationId)"
						:style="{'background':item.bg,'color':item.color}" class="mb15 point"
						style="border-radius: 4px;padding: 10px 20px;box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25);">
						<div class="font15 mb5">{{item.installationName}}</div>
						<div>生产时间{{item.days}}天 {{item.runHours}}小时</div>
					</div>

					<div v-for="(item,index) in data6" v-if="item.installationId != null" :key="index"
						@click="$router.push('/wasteGas/outletInspectDefDet?defenceId='+item.installationId)"
						:style="{'background':item.bg,'color':item.color}" class="mb15 point"
						style="border-radius: 4px;padding: 10px 20px;">
						<div class="font15 mb5">{{item.installationName}}</div>
						<div>运行时间{{item.days}}天 {{item.runHours}}小时</div>
						<div style="display: flex;justify-content: space-between">
							<div>
								<span>异常工况：</span>
								<span :style="{'color':item.warningNum >0 ?'#FF4E00':''}">{{item.warningNum}}</span>
							</div>
							<div>
								<span>正常运转率：</span>
								<span
									:style="{'color':item.normalRunPercent <95 ?'#FF4E00':''}">{{item.normalRunPercent}}%</span>
							</div>
						</div>
					</div>

				</div>
			</div>
			<div style="flex:6;margin-left: 20px;">
				<div>
					<div style="color:#222;margin-bottom:3px" class="font15 mb15 pl15">处置设备正常运转率（日）</div>
				</div>
				<div style="background: #F8F8F8;border-radius: 24px;padding: 20px 80px;">
					<div style="position: relative;">
						<div v-for="(item,index) in 20" class="mb5">
							<div v-if="index ==0"
								:style="{'background':(data7.percent>=index*5.3)?'rgba(35, 236, 214, 1)':'rgba(35, 236, 214, 0.3)'}"
								style="width: 96px;height: 14px;border-radius: 2px;"></div>
							<div v-else-if="index ==1"
								:style="{'background':(data7.percent>=index*5.3)?'rgba(94, 232, 200, 1)':'rgba(94, 232, 200, 0.3)'}"
								style="width: 96px;height: 14px;border-radius: 2px;"></div>
							<div v-else-if="index ==2"
								:style="{'background':(data7.percent>=index*5.3)?'rgba(125, 228, 186, 1)':'rgba(125, 228, 186, 0.3)'}"
								style="width: 96px;height: 14px;border-radius: 2px;"></div>
							<div v-else-if="index ==3"
								:style="{'background':(data7.percent>=index*5.3)?'rgba(153, 223, 170, 1)':'rgba(153, 223, 170, 0.3)'}"
								style="width: 96px;height: 14px;border-radius: 2px;"></div>
							<div v-else-if="index ==4"
								:style="{'background':(data7.percent>=index*5.3)?'rgba(177, 218, 151, 1)':'rgba(177, 218, 151, 0.3)'}"
								style="width: 96px;height: 14px;border-radius: 2px;"></div>
							<div v-else-if="index ==5"
								:style="{'background':(data7.percent>=index*5.3)?'rgba(177, 218, 151, 1)':'rgba(177, 218, 151, 0.3)'}"
								style="width: 96px;height: 14px;border-radius: 2px;"></div>
							<div v-else-if="index ==6"
								:style="{'background':(data7.percent>=index*5.3)?'rgba(198, 212, 132, 1)':'rgba(198, 212, 132, 0.3)'}"
								style="width: 96px;height: 14px;border-radius: 2px;"></div>
							<div v-else-if="index ==7"
								:style="{'background':(data7.percent>=index*5.3)?'rgba(218, 203, 109, 1)':'rgba(218, 203, 109, 0.3)'}"
								style="width: 96px;height: 14px;border-radius: 2px;"></div>
							<div v-else-if="index ==8"
								:style="{'background':(data7.percent>=index*5.3)?'rgba(234, 195, 86, 1)':'rgba(234, 195, 86, 0.3)'}"
								style="width: 96px;height: 14px;border-radius: 2px;"></div>
							<div v-else-if="index ==9"
								:style="{'background':(data7.percent>=index*5.3)?'rgba(246, 186, 65, 1)':'rgba(246, 186, 65, 0.3)'}"
								style="width: 96px;height: 14px;border-radius: 2px;"></div>
							<div v-else-if="index ==10"
								:style="{'background':(data7.percent>=index*5.3)?'rgba(255, 177, 47, 1)':'rgba(255, 177, 47, 0.3)'}"
								style="width: 96px;height: 14px;border-radius: 2px;"></div>
							<div v-else-if="index ==11"
								:style="{'background':(data7.percent>=index*5.3)?'rgba(255, 166, 39, 1)':'rgba(255, 166, 39, 0.3)'}"
								style="width: 96px;height: 14px;border-radius: 2px;"></div>
							<div v-else-if="index ==12"
								:style="{'background':(data7.percent>=index*5.3)?'rgba(255, 154, 36, 1)':'rgba(255, 154, 36, 0.3)'}"
								style="width: 96px;height: 14px;border-radius: 2px;"></div>
							<div v-else-if="index ==13"
								:style="{'background':(data7.percent>=index*5.3)?'rgba(255, 142, 43, 1)':'rgba(255, 142, 43, 0.3)'}"
								style="width: 96px;height: 14px;border-radius: 2px;"></div>
							<div v-else-if="index ==14"
								:style="{'background':(data7.percent>=index*5.3)?'rgba(255, 129, 54, 1)':'rgba(255, 129, 54, 0.3)'}"
								style="width: 96px;height: 14px;border-radius: 2px;"></div>
							<div v-else-if="index ==15"
								:style="{'background':(data7.percent>=index*5.3)?'rgba(255, 114, 64, 1)':'rgba(255, 114, 64, 0.3)'}"
								style="width: 96px;height: 14px;border-radius: 2px;"></div>
							<div v-else-if="index ==16"
								:style="{'background':(data7.percent>=index*5.3)?'rgba(255, 100, 73, 1)':'rgba(255, 100, 73, 0.3)'}"
								style="width: 96px;height: 14px;border-radius: 2px;"></div>
							<div v-else-if="index ==17"
								:style="{'background':(data7.percent>=index*5.3)?'rgba(255, 86, 79, 1)':'rgba(255, 86, 79, 0.3)'}"
								style="width: 96px;height: 14px;border-radius: 2px;"></div>
							<div v-else-if="index ==18"
								:style="{'background':(data7.percent>=index*5.3)?'rgba(255, 86, 79, 1)':'rgba(255, 86, 79, 0.3)'}"
								style="width: 96px;height: 14px;border-radius: 2px;"></div>
						</div>
						<div style="position: absolute;left:0" :style="{'bottom':(data7.percent - 2)+'%'}"
							class="displayFlex">
							<div style="width: 128px;height: 2px;background: #555555;"></div>
							<div style="color: #888;width: 60px;" class="ml5">{{data7.percent}}%</div>
						</div>

					</div>
				</div>
			</div>
			<div style="flex:6;margin-left: 20px;">
				<div>
					<div style="color:#222;margin-bottom:3px" class="font15 mb15 pl15">设备运行异常(次数)</div>
				</div>
				<div
					style="background: #F8F8F8;border-top-left-radius: 24px;padding: 0px 20px;border-bottom-left-radius: 24px;">
					<div id="chart4" style="width: 100%;height: 200px;"></div>
					<div id="chart3" style="width: 100%;height: 200px;"></div>
				</div>
			</div>
			<div style="flex:6;margin-left: 20px;">
				<div>
					<div style="color:#222;margin-bottom:3px" class="font15 mb15 ">
						<span>问题工单</span>
						<span style="color:#3A3EF4" class="font13">（{{dataList3.list && dataList3.list.length || 0}}）</span>
					</div>
				</div>
				<div style="height: 401px;overflow-y: auto;">
					<el-empty v-if="!dataList3.list || dataList3.list.length == 0" />
					<div v-for="(item,index) in dataList3.list || []" :key="index" class="mb20 point" style="display: flex;"
						@click="gotoPage(item)">
						<div class="font14">
							<span>{{index+1}}、</span>
						</div>
						<div>
							<div class="textOver color333 font14 mb5">{{item.problemContent || ''}}</div>
							<div style="color:#888;font-size:13px;">
								{{item.createTime || ''}}
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>

		<el-dialog title="视频" :visible.sync="show2" width="1040px" top="0px" append-to-body>
			<!-- <iframe :src="videoUrl" style="width: 100%;height: 300px;"></iframe> -->
			<video ref="singleVideoElement" controls style="width: 1000px"></video>
		</el-dialog>
	</div>
</template>

<script>
	import flvjs from 'flv.js';
	import * as echarts from 'echarts';

	import outletOrderV2 from '@/components/wasteGas/outletOrderV2'
	import outletSurvey from '@/components/wasteGas/outletSurvey'
	import moment from 'moment'
	let that
	const imgUrl =
		"https://www.weifeibangbang.com/wfbb-webupload/service/sys/file/upload/view?appKey=5da5441f62e48aedc7a3853ffc75c2db&prodID=gf&fileID=";
	export default {
		components: {
			outletOrderV2,
			outletSurvey
		},
		data() {
			return {
				loading: true,
				optionType: 'one',
				show2: false,
				chooseItem: 'one',
				outletId: '',
				outletName: '',
				params: {
					outletId: '',
					startTime: moment().subtract(2, 'days').format('YYYY-MM-DD HH:mm:ss'),
					endTime: moment().format('YYYY-MM-DD HH:mm:ss')
				},
				dataList: {
					pollutionList: [], // 添加默认空数组
					onlineStatus: '',
					latestTime: ''
				},
				dataList2: {
					earlyWarningList: [], // 添加默认空数组
					warningList: [], // 添加默认空数组
					weekNum: 0,
					monthNum: 0,
					list: []
				},
				dataList3: {
					weekNum: 0,
					monthNum: 0,
					list: [] // 添加默认空数组
				},
				data4: {
					hourMonthPercent: 0,
					hourYearPercent: 0,
					dayMonthPercent: 0,
					dayYearPercent: 0
				},
				data5: [],
				data6: [],
				data7: {
					percent: 0
				},
				chooseType: "one",
				chooseType2: "one",
				videoList: [],
			}
		},
		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token
			that.outletId = that.$route.query.outletId
			that.outletName = that.$route.query.outletName
			that.loadData()
		},
		methods: {
			loadData() {
				that.loading = true
				// 修复第52行的样式错误
				setTimeout(() => {
					const element = document.querySelector('div[style*="overflow-y: autowidth"]')
					if (element) {
						element.style.overflowY = 'auto'
						element.style.width = '100%'
					}
				}, 100)

				// 并行加载所有数据
				Promise.all([
					that.getOutletWarnings(),
					that.getGasProblems(),
					that.getGasOnlineLatestMonitorByOutletId(),
					that.getGasMonitorQualify(),
					that.getTableData(),
					that.getGasRunTime(),
					that.countGasWarning(),
					that.countGasProblem(),
					that.findGasVideoMonitor()
				]).catch(error => {
					console.error('数据加载出错：', error)
				}).finally(() => {
					that.loading = false
				})
			},

			showSingleVode(item) {
				that.show2 = true

				that.$nextTick(() => {
					let videoElement = that.$refs.singleVideoElement;
					if (flvjs.isSupported()) {
						that.flvPlayer = flvjs.createPlayer({
							type: 'flv',
							url: item.url
						});

						that.flvPlayer.attachMediaElement(videoElement);

						that.flvPlayer.load();
						that.flvPlayer.play();
					} else {
						console.error('FLV.js is not supported in this browser.');
					}
				})
			},

			findGasVideoMonitor() {
				that.ajax({
					url: '/video/findGasVideoMonitor?ticketId=' + this.$store.state.token,
					data: {
						outletId: that.outletId
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						that.videoList = result.data
						for (let item of that.videoList) {
							item.coverFile = imgUrl + item.coverFileId
						}
					},
				})
			},

			countGasProblem() {
				that.ajax({
					url: '/outletDetail/countGasProblem',
					data: JSON.stringify({
						outletId: that.params.outletId,
						recordDate: moment().format('YYYY-MM') + "-01"
					}),
					contentType: 'application/json',
					success: function(result) {
						for (let item of result.data.month) {
							item.name = item.defenceName
							item.value = item.num
						}
						that.formPieChart("chart4", result.data.month)

						for (let item of result.data.year) {
							item.name = item.defenceName
							item.value = item.num
						}
						that.formPieChart("chart3", result.data.year, "本年")
					},
				})
			},

			formPieChart(chartId, data, desc = "本月") {
				//console.log(chartId, data)
				var chartDom = document.getElementById(chartId);
				var myChart = echarts.init(chartDom);
				var option;
				var a = 0;

				for (let item of data) {
					a += Number(item.value)
				}

				option = {
					title: {
						text: desc + "异常",
						top: "10",
						left: "60",
						textStyle: {
							color: "#3A3EF4",
							fontSize: 15
						}

					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						type: 'scroll',
						orient: 'vertical',
						right: 0,
						top: "center",
						icon: 'circle',
						formatter: function(name) { // 添加
							let total = 0
							let target
							for (let i = 0; i < data.length; i++) {
								total += data[i].value
								if (data[i].name === name) {
									target = data[i].value
								}
							}
							var arr = [
								'{a|' + name + '}\n' + '{c|' + desc + target + '次}'
							]
							return arr.join('  ')
						},
						textStyle: { // 添加
							padding: [8, 0, 0, 0],
							rich: {
								a: {
									color: '#888',
									fontSize: 14,
									width: 110
								},
								c: {
									fontSize: 16,
									color: '#333',
									lineHeight: 30
								}
							}
						}
					},
					grid: {
						show: false,
						left: '3%',
						right: '4%',
						bottom: '0%',
						containLabel: true
					},

					series: [{
						type: 'pie',
						radius: ['30%', '60%'],
						center: ['30%', '50%'],

						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 12,
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: data
					}]
				};

				option && myChart.setOption(option);
			},


			countGasWarning() {
				that.ajax({
					url: '/outletDetail/countGasWarning',
					data: JSON.stringify({
						outletId: that.params.outletId,
						recordDate: moment().format('YYYY-MM') + "-01"
					}),
					contentType: 'application/json',
					success: function(result) {
						that.data7 = result.data
					},
				})
			},

			getGasRunTime() {
				that.ajax({
					url: '/outletDetail/getGasRunTime',
					data: JSON.stringify({
						outletId: that.params.outletId,
						recordDate: moment().format('YYYY-MM') + "-01"
					}),
					contentType: 'application/json',
					success: function(result) {
						for (let index in result.data) {
							let item = result.data[index]
							if (item.installationId == null) {
								item.bg = "#5054C2"
								item.color = "#fff"
							} else {
								item.bg = "#FEE588"
								item.color = "#444"
							}
						}
						that.data6 = result.data
					},
				})
			},

			getGasMonitorQualify() {
				that.ajax({
					url: '/outletDetail/getGasMonitorQualify',
					dataType: 'json',
					data: JSON.stringify({
						outletId: that.outletId
					}),
					contentType: 'application/json',
					success: function(result) {
						that.data4 = result.data
					}
				})
			},

			getTableData() {
				let apiName = "/outletDetail/getGasOutletSurveyListV2"
				that.ajax({
					url: apiName + '?ticketId=' + that.params.ticketId,
					data: JSON.stringify({
						outletId: that.outletId
					}),
					contentType: 'application/json',
					dataType: 'json',
					method: 'POST',
					success: function(result) {
						if (result.data) {
							for (let item of result.data) {
								item.planTime = item.planStartTime + "~" + item.planEndTime
								item.completeTime = item.completeTime ? item.completeTime.split(" ")[0] : ''
								if (item.isComplete) {
									item.bg = "#E4FFE9"
									item.color = '#298346'
									item.borderColor = "#26B018"
								} else {
									item.bg = "#F4F7FA"
									item.color = '#888888'
									item.borderColor = "#888888"
								}
							}
							that.data5 = result.data;
						}
					},
				})
			},

			gotoPage(item) {
				let routerUrl = ""
				if (item.scheduleType == "WASTE_GAS" || item.scheduleType == "WASTE_WATER") routerUrl =
					"/problemTicketDet?id=" + item.id
				if (routerUrl) {
					routerUrl = routerUrl + "&ticketId=" + this.$store.state.token
					that.$router.push(routerUrl)
				}
			},

			gotoDet(item) {
				that.$router.push("/wasteGas/onlineSurveyDet?ticketId=" + that.$store.state.token +
					"&outletId=" + that
					.outletId)
			},

			gotoDet2(item) {
				that.$router.push("/wasteGas/warningCenterDet?ticketId=" + that.$store.state.token +
					"&id=" + item.id)
			},

			getOutletWarnings() {
				return new Promise((resolve, reject) => {
					that.ajax({
						url: '/outletDetail/getOutletWarnings',
						dataType: 'json',
						data: JSON.stringify({
							outletId: that.outletId
						}),
						contentType: 'application/json',
						success: function(result) {
							if (result.data) {
								// 确保数据中包含所需的数组
								if (!result.data.earlyWarningList) result.data.earlyWarningList = []
								if (!result.data.warningList) result.data.warningList = []
								that.dataList2 = result.data
							}
							resolve(result)
						},
						error: function(error) {
							reject(error)
						}
					})
				})
			},

			getGasProblems() {
				return new Promise((resolve, reject) => {
					that.ajax({
						url: '/outletDetail/getGasProblems',
						dataType: 'json',
						data: JSON.stringify({
							outletId: that.outletId,
							recordDate: moment().format('YYYY-MM-DD')
						}),
						contentType: 'application/json',
						success: function(result) {
							if (result.data) {
								// 确保数据中包含list数组
								if (!result.data.list) result.data.list = []
								that.dataList3 = result.data
							}
							resolve(result)
						},
						error: function(error) {
							reject(error)
						}
					})
				})
			},

			getGasOnlineLatestMonitorByOutletId: function(value) {
				return new Promise((resolve, reject) => {
					that.params.outletId = that.outletId
					that.ajax({
						url: '/gasOutlet/getGasOnlineLatestMonitorByOutletId',
						dataType: 'json',
						data: JSON.stringify(that.params),
						contentType: 'application/json',
						success: function(result) {
							if (result.data) {
								// 确保数据中包含pollutionList数组
								if (!result.data.pollutionList) result.data.pollutionList = []
								that.dataList = result.data
							}
							resolve(result)
						},
						error: function(error) {
							reject(error)
						}
					})
				})
			},
		}
	}
</script>

<style scoped>
	:deep(.el-progress__text) {
		font-size: 20px !important;
		color: #000 !important;
	}

	.headerStyle {
		color: #3A3EF4;
		border-top: 3px solid#3A3EF4;
		font-weight: bold;
	}

	.headerStyle2 {
		color: #FF4E00;
		border-top: 3px solid#FF4E00;
		font-weight: bold;
	}
</style>